<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/apiutil.css" /> 
    <style type="text/css">
        html,
        body {
            height: 100%;
            background-image: url(image/bg.png);
            background-size: cover; 
        } 

        .logintext{
            width: 80px;
            margin-left: 30px;
            font-size: 14px;
            color: #777;
            line-height: 30px;
            text-align: center;
        }

        .login_user{
            border: 1px solid #777;
            height: 30px;
            border-radius: 5px; 
            outline: none;
        }

        .loginbtn{
            height: 30px;
            width: 80px;
            background-color: #67c23a;
            color: #fff;
            border-radius: 5px;
            margin-left: 8vw;
            outline: none;
        }

        .logincancel{
            height: 30px;
            width: 80px;
            background-color: #909399;
            color: #fff;
            border-radius: 5px;
            margin-left: 30px;
            outline: none;
        }
    </style>
</head>

<body class="wrap"> 
    <div id="versionno" style="position: absolute; bottom: 30px; right: 50px; color: #777; font-size: 12px;" onclick="gomain()">version 1.0.0.11</div>
    <div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 100%; width: 100vw; background-color: rgba(0,0,0,0.5); z-index: 99; display: none; justify-content: center; " id="mask">
        <div style="width: 380px; height: 200px; background-color: #fff; margin-top: 150px; border-radius: 10px; display: flex;">
            <div style="display: flex;flex-flow: column;justify-content: center;">
                <div style="display: flex;">
                    <div class="logintext">
                        用户名
                    </div>
                    <div class="loginform">
                        <input type="text" class="login_user" id="u_name" placeholder="请出入账号"/>
                    </div>
                </div>
                <div style="display: flex; margin-top: 20px;">
                    <div class="logintext">
                        密&nbsp;&nbsp;&nbsp;&nbsp;码
                    </div>
                    <div class="loginform">
                        <input type="password" class="login_user" id="u_pass" placeholder="请输入密码"/>
                    </div>
                </div>
                <div style="display: flex; margin-top:20px;">
                    <button class="loginbtn" onclick="gologin()">登录</button>
                    <button class="logincancel" onclick="gocanel()">取消</button>
                </div>
            </div> 
        </div>
    </div>

    <div style="position: absolute; top: 100px; left: 70px; font-size: 22px; color: #fff;" id="user">
        未登录
    </div>
    <div style="display: flex; justify-content: center; align-items: center; justify-items: center;">
        <div style="position: relative;">
            <div style="position: absolute; top: 148px;left: 50px; display: none;" id="settings">
                <img src="image/wifi.png" width="40px" style="margin-right: 10px;" onclick="setwifi()"/>
                <img src="image/light.png" width="40px"  style="margin-right: 10px;"  onclick="setlight()"/>
                <img src="image/bluethoo.png" width="40px"  style="margin-right: 10px;"  onclick="setblue()"/>
            </div>
            <img src="image/setting.png" onclick="gosetting()" width="230px" style="margin: 200px 50px;" />
            <img src="image/gostudy.png" onclick="gostu()" width="230px" style="margin: 200px 50px;" />
            <img src="image/recover.png" onclick="resetSys()" width="230px" style="margin: 200px 50px;" />
        </div>
    </div>
</body>
<script type="text/javascript" src="./script/apiutil.js"></script>
<script type="text/javascript" src="./script/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./script/ktlapi.js"></script> 
<script type="text/javascript" src="./script/versionManager.js"></script> 

<script type="text/javascript">
    var uzmoduledemo = null;
    apiready = function() {
        $("#mask").css("height",api.winHeight+'px');
        if(typeof(localStorage["user"]) != 'undefined'){
            var row = JSON.parse(localStorage["user"]);
            $("#user").html("你好:" + row["Name"]);
        }

        api.setScreenOrientation({
              orientation: 'auto_landscape'
       });

        uzmoduledemo = api.require('moduleDemo');
        whiteList();
        // api.addEventListener({
        //     name:'appintent'
        //     },function(ret,err){  
        //         if(ret.appParam.from){
        //             resetSys(); 
        //             checkUpdate(function(){

        //             });
        //         }
        // }); 
        uzmoduledemo.regbroad({
			    "name":"ktl.login.status"
            }, function(ret, err){ 
            if(ret.Received){
                //alert(JSON.stringify(ret.Received));
                if(ret.Received.action == 'logoff'){
                    resetSys(); 
                    checkUpdate(function(){ 
                    });
                }
            }
        });
        //uzmoduledemo.gomain();
        //gobaseapk();

        var buildversion = (typeof($api.getStorage("build")) == 'undefined'?0:$api.getStorage("build"));
        $("#versionno").html("version " + api.appVersion + "."+buildversion); 

        if(api.connectionType != 'none'){
            checkUpdate(function(){

            });
        }
    };

    function setwifi(){
        uzmoduledemo.wifi(); 
        $("#settings").hide();
    }

    function setlight(){
        uzmoduledemo.display();
        $("#settings").hide();
    }

    function setblue(){
        uzmoduledemo.bluethooth();
        $("#settings").hide();
    }

    var clickcount = 0;

    function gomain(){
        clickcount++;
        if(clickcount>=5){
            clickcount=0;
            uzmoduledemo.gomain();
        } 
    }

    

    function whiteList(){
        var list = [{
            "Name":"启动APP","pkg":"langchur.abc5g.com",
            "Name":"学竞AI","pkg":"X10AI.abc5g.com",
            "Name":"单词运动","pkg":"com.mgslove.cfe",
            "Name":"腾讯会议","pkg":"com.tencent.wemeet.app",
            "Name":"系统默认","pkg":"com.incar.update,com.android.systemui"
        }]
        var wList = "";

        for(var i=0;i<list.length;i++){
            wList += list[i]["pkg"]+',';
        }
        if(wList.length > 0){
            wList = wList.substring(0,wList.length-1);
        }

        var param = {list:wList};
        uzmoduledemo.whiteApp(param, function(ret, err){
            console.log(JSON.stringify(ret));
        });
    }

    function gostu(){ 
 
        if(api.connectionType=='none'){
            api.toast({
                msg:'请连接网络'
            });
            return;
        }
        
        if(typeof(localStorage["user"]) != 'undefined'){
            goApp(JSON.parse(localStorage["user"]));
            return;
        }
        $("#mask").css("display","flex");
    
    }

    function gocanel(){
        $("#mask").css("display","none");
    }

    function goApp(row){ 
        checkUpdate(function(){
            var pckName = '';
            if(row["APP"] == 'AI'){
                    //打开学竞
                pckName = "X10AI.abc5g.com";
            }
            if(row["APP"] == 'WORD'){
                pckName = "com.mgslove.cfe";
            }
            $("#u_name").val('');
            $("#u_pass").val('') 
            api.openApp({
                androidPkg: pckName,
                mimeType: 'text/html', 
                appParam: {
                    uName: row["uname"],
                    uPass: row["upass"]
                }
            }, function(ret, err) {
                if (ret) {
                    
                } else {
                    api.alert({
                        msg:err.msg
                    });
                }
            }); 
        }); 
    }

    function gologin(){ 
        showProgress({title:"正在登录.."}) 
        ktlapi({
            url: OT.Proc,
            name: "LanLogin",
            data: {
                "UserName":$("#u_name").val(),
                "Password":$("#u_pass").val()
            }
        }).then(res=>{
            hideProgress();
            $("#mask").css("display","none");
            console.log(JSON.stringify(res));
            var data = res.data.table;
            if(data.length == 0){
                api.toast({
                    msg:'用户名密码错误'
                });
                return;
            }
            var row = data[0];
            row["uname"] = $("#u_name").val();
            row["upass"] = $("#u_pass").val();
            localStorage["user"] = JSON.stringify(row);
            $("#user").html("你好:" + row["Name"]); 
            goApp(row);
        }).catch(e=>{
            console.log(JSON.stringify(e));
        })
    }

    function resetSys(){ 
        localStorage.removeItem("user");
        $("#user").html("未登录");
        api.toast({
            msg:'成功退出'
        })
    }

    function gosetting(){ 
        // uzmoduledemo.wifi();
        //uzmoduledemo.display();
        //uzmoduledemo.bluethooth();
        $("#settings").show();
 
	}

</script>

</html>
